<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>Configuration, methods and events of Kendo UI Spreadsheet Range Instance object</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/spreadsheet/range.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/spreadsheet/range.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendospreadsheetrange"><a href="#kendospreadsheetrange">kendo.spreadsheet.Range</a></h1>

<p>Represents one or more rectangular regions of cells in a given <a href="/api/javascript/spreadsheet/sheet">Sheet</a>. Inherits from <a href="/api/javascript/class">Class</a>.</p>

<p>An instance of a range object may be obtained as a return value from the Sheet <a href="/api/javascript/spreadsheet/sheet#methods-range">range</a> or <a href="/api/javascript/spreadsheet/sheet#methods-selection">selection</a> methods.</p>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-background"><a href="#methods-background">background</a></h3>

<p>Gets or sets the background color of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>Any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the current background color of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1:B2").value("foo");
    sheet.range("A1").background("green");
    sheet.range("A2").background("#a0b0c0");
    sheet.range("B1").background("rgb(255,0, 255)");
&lt;/script&gt;
</code></pre>

<h3 id="methods-bold"><a href="#methods-bold">bold</a></h3>

<p>Gets or sets the bold state of the cells in the range.</p>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>optional</em>
</h5>

<p>True to make the text bold; false otherwise.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> the current bold state of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("bold");
    sheet.range("A1").bold(true);
&lt;/script&gt;
</code></pre>

<h3 id="methods-borderBottom"><a href="#methods-borderBottom">borderBottom</a></h3>

<p>Gets or sets the state of the bottom border of the cells. If the range includes more than a single cell, the setting is applied to all cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>The border configuration object. It may contain <code>size</code> and <code>color</code> keys.</p>

<p>The <code>color</code> may be set to any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.
The <code>size</code> should be the border width in pixels (numeric, not string).</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A2:B3").borderBottom({ size: 2, color: "green" });
&lt;/script&gt;
</code></pre>

<h3 id="methods-borderLeft"><a href="#methods-borderLeft">borderLeft</a></h3>

<p>Gets or sets the state of the left border of the cells. If the range includes more than a single cell, the setting is applied to all cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>The border configuration object. It may contain <code>size</code> and <code>color</code> keys.</p>

<p>The <code>color</code> may be set to any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.
The <code>size</code> should be the border width in pixels (numeric, not string).</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A2:B3").borderLeft({ size: 2, color: "green" });
&lt;/script&gt;
</code></pre>

<h3 id="methods-borderRight"><a href="#methods-borderRight">borderRight</a></h3>

<p>Gets or sets the state of the right border of the cells. If the range includes more than a single cell, the setting is applied to all cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>The border configuration object. It may contain <code>size</code> and <code>color</code> keys.</p>

<p>The <code>color</code> may be set to any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.
The <code>size</code> should be the border width in pixels (numeric, not string).</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A2:B3").borderRight({ size: 2, color: "green" });
&lt;/script&gt;
</code></pre>

<h3 id="methods-borderTop"><a href="#methods-borderTop">borderTop</a></h3>

<p>Gets or sets the state of the top border of the cells. If the range includes more than a single cell, the setting is applied to all cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>The border configuration object. It may contain <code>size</code> and <code>color</code> keys.</p>

<p>The <code>color</code> may be set to any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.
The <code>size</code> should be the border width in pixels (numeric, not string).</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A2:B3").borderTop({ size: 2, color: "green" });
&lt;/script&gt;
</code></pre>

<h3 id="methods-color"><a href="#methods-color">color</a></h3>

<p>Gets or sets the text color of the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>Any valid <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value">CSS color</a>.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the current color of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1:B2").value("foo");
    sheet.range("A1").color("green");
    sheet.range("A2").color("#a0b0c0");
    sheet.range("B1").color("rgb(255,0, 255)");
&lt;/script&gt;
</code></pre>

<h3 id="methods-clear"><a href="#methods-clear">clear</a></h3>

<p>Clears the contents of the range cells.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>An object which may contain <code>contentsOnly: true</code> or <code>formatOnly: true</code> key values. Clearing the format will remove the cell formatting and visual styles.</p>

<p>If a parameter is not passed, the method will clear both the cells values and the formatting.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").value(1);
    sheet.range("A2").value(2);
    sheet.range("A1:A2").clear();
&lt;/script&gt;
</code></pre>

<h3 id="methods-clearFilter"><a href="#methods-clearFilter">clearFilter</a></h3>

<p>Clears the set filters for the given column(s). The indices is relative to the beginning of the range.</p>

<h4>Parameters</h4>

<h5>indices <code>Array  |</code><code> Number</code>
</h5>

<p>The column(s) which filters should be cleared.</p>

<h4>Example - clear the filters for a column</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;

&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ "C 1", "C 2", "C 3" ],
        [ 7, 5, 6 ],
        [ 7, 8, 9 ],
        [ 6, 3, 9 ]
    ];

    sheet.range("A1:C4").values(values);

    var filter = new kendo.spreadsheet.ValueFilter({ values: [ 7 ] });
    var filter2 = new kendo.spreadsheet.ValueFilter({ values: [ 8 ] });

    sheet.range("A1:C4").filter([
      { column: 0, filter: filter },
        { column: 1, filter: filter2 }
    ]);

    // row 3 will be visible now.

    sheet.range("A1:C3").clearFilter([ 1 ]);
    // the filter on B column will be cleared, so rows 2 and 3 will be visible.
&lt;/script&gt;

</code></pre>

<h3 id="methods-editor"><a href="#methods-editor">editor</a></h3>

<p>Gets or sets the editor of the cells in the range.</p>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>The name of the custom cell editor, registered as <a href="http://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/custom-editors">described in this help article</a></p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> name of the custom cell editor.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet" style="width: 100%;"&gt;&lt;/div&gt;
  &lt;script&gt;
    kendo.spreadsheet.registerEditor("color", function(){
        var context, dlg, model;

        // Further delay the initialization of the UI until the `edit` method is
        // actually called, so here just return the object with the required API.

        return {
            edit: function(options) {
                context = options;
                open();
            },
            icon: "k-icon k-i-background"
        };

        // This function actually creates the UI if not already there, and
        // caches the dialog and the model.
        function create() {
            if (!dlg) {
                model = kendo.observable({
                    value: "#000000",
                    ok: function() {
                        // This is the result when OK is clicked. Invoke the
                        // callback with the value.
                        context.callback(model.value);
                        dlg.close();
                    },
                    cancel: function() {
                        dlg.close();
                    }
                });
                var el = $("&lt;div data-visible='true' data-role='window' data-modal='true' data-resizable='false' data-title='Select color'&gt;" +
                           "  &lt;div data-role='flatcolorpicker' data-bind='value: value'&gt;&lt;/div&gt;" +
                           "  &lt;div style='margin-top: 1em; text-align: right'&gt;" +
                           "    &lt;button style='width: 5em' class='k-button' data-bind='click: ok'&gt;OK&lt;/button&gt;" +
                           "    &lt;button style='width: 5em' class='k-button' data-bind='click: cancel'&gt;Cancel&lt;/button&gt;" +
                           "  &lt;/div&gt;" +
                           "&lt;/div&gt;");
                kendo.bind(el, model);

                // Cache the dialog.
                dlg = el.getKendoWindow();
            }
        }

        function open() {
            create();
            dlg.open();
            dlg.center();

            // If the selected cell already contains some value, reflect
            // it in the custom editor.
            var value = context.range.value();
            if (value != null) {
                model.set("value", value);
            }
        }
    });

   $(function() {
       $("#spreadsheet").kendoSpreadsheet({
           sheetsbar: false,
           excel: {
               // Required to enable Excel Export in some browsers
               proxyURL: "//demos.telerik.com/kendo-ui/service/export"
           },
           sheets: [{
               rows: [{
                   cells: [
                       { value: "Select color:", bold: true },
                       { background: "#fef0cd",
                         editor: "color" }
                   ]
               }]
           }]
       });
   });
  &lt;/script&gt;
</code></pre>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Gets or sets the disabled state of the cells in the range.</p>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>optional</em>
</h5>

<p>True to make the cell enabled; false to disable it.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> the current disabled state of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("disabled");
    sheet.range("A1").enable(false);
&lt;/script&gt;
</code></pre>

<h3 id="methods-fillFrom"><a href="#methods-fillFrom">fillFrom</a></h3>

<p>Fills a range with values inferred from a source range.  This method employs some heuristics similar to what Excel's auto-filling algorithm does when you select a range of cells and drag the bottom-right handle.  The range to be filled is the current object, and you must pass a source range containing data as first argument.</p>

<h4>Parameters</h4>

<h5>srcRange <code>Range  |</code><code> String</code>
</h5>

<p>The source range.  It must have the same number of rows or the same number of columns as the current range — otherwise
an exception will be thrown (a <code>Range.FillError</code> object having <code>code</code> property <code>"incompatibleRanges"</code>).</p>

<h5>direction <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>optional</em>
</h5>

<p>Specifies the fill direction.  If the source range (<code>srcRange</code>) and target range (the current object) are adjacent, the
fill direction can be inferred from their positions, so it can be missing.  For example:</p>

<pre><code>    sheet.range("B2:C3").fillFrom("B4:C5")
</code></pre>

<p>In this case it will select vertical reverse filling, because the target range is above the source range.</p>

<p>If the ranges are not adjacent and the direction is missing, an exception will be thrown if the ranges don't start
either on same column or on the same row (<code>"noFillDirection"</code> error code).</p>

<p>Possible values for direction:</p>

<ul>
<li>0 — fill top-down</li>
<li>1 — fill left-to-right</li>
<li>2 — fill bottom-up</li>
<li>3 — fill right-to-left</li>
</ul>

<h4>Example</h4>

<pre><code>    &lt;div id="spreadsheet"&gt;&lt;/div&gt;
    &lt;script type="text/javascript" charset="utf-8"&gt;

        $("#spreadsheet").kendoSpreadsheet();

        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

        var sheet = spreadsheet.activeSheet();

        sheet.range("A1:C2").values([
            [ 2, "Mon", "Foo 1" ],
            [ 5, "Wed", "Foo 2" ]
        ]);

        try {
            sheet.range("A3:C10").fillFrom("A1:C2");
        } catch(ex) {
            if (ex instanceof kendo.spreadsheet.Range.FillError) {
                // can be "incompatibleRanges" or "noFillDirection"
                console.log(ex.code);
            } else {
                throw ex;
            }
        }
    &lt;/script&gt;
</code></pre>

<p>The above will continue column <code>A</code> with 8, 11, 14 etc., column <code>B</code> with "Fri", "Sun", "Thu" etc. and column <code>C</code> with
"Foo 3", "Foo 4" etc.</p>

<h3 id="methods-filter"><a href="#methods-filter">filter</a></h3>

<p>Enables/disables or sets the filter for a given range.</p>

<h4>Parameters</h4>

<h5>filter <code>Boolean  |</code><code> Object  |</code><code> Array</code>
</h5>

<p>Determines the action performed by the method.</p>

<ul>
<li>Passing <code>true</code> enables the filtering for the given range.</li>
<li>Passing <code>false</code> disables and clears the set filters.</li>
<li>Passing a <code>{ column: Number, filter: kendo.spreadsheet.Filter }</code> object applies the filter to the respective column.</li>
<li>Passing an array of <code>{ column: Number, filter: kendo.spreadsheet.Filter }</code> objects applies each filter to the respective column. The column index is relative to the beginning of the range.</li>
</ul>

<h4>Example - enable filter</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    sheet.range("A1:C3").values(values);

    sheet.range("A1:C3").filter(true);
&lt;/script&gt;
</code></pre>

<h4>Example - disable filter</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    sheet.range("A1:C3").values(values);

    sheet.range("A1:C3").filter(true);
    sheet.range("A1:C3").filter(false);
&lt;/script&gt;
</code></pre>

<h4>Example - set filter</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    var values = [
        [ "C 1", "C 2", "C 3" ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    sheet.range("A1:C3").values(values);

    var filter = new kendo.spreadsheet.ValueFilter({ values: [ 7 ] });

    sheet.range("A1:C3").filter({ column: 0, filter: filter });
&lt;/script&gt;
</code></pre>

<h4>Example - set multiple filters</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ "C 1", "C 2", "C 3" ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    sheet.range("A1:C3").values(values);

    var filter = new kendo.spreadsheet.ValueFilter({ values: [ 7 ] });
    var filter2 = new kendo.spreadsheet.ValueFilter({ values: [ 8 ] });

    sheet.range("A1:C3").filter([
        { column: 0, filter: filter },
        { column: 1, filter: filter2 }
    ]);
&lt;/script&gt;
</code></pre>

<h3 id="methods-fontFamily"><a href="#methods-fontFamily">fontFamily</a></h3>

<p>Gets or sets the font family of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>The font family that should be set.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the font family of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1:B1").value("monospace");
    sheet.range("A1").fontFamily("monospace");
&lt;/script&gt;
</code></pre>

<h3 id="methods-fontSize"><a href="#methods-fontSize">fontSize</a></h3>

<p>Gets or sets the font size of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>optional</em>
</h5>

<p>The font size (in pixels) that should be set.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> the font size of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("50px");
    sheet.range("A1").fontSize(50);
&lt;/script&gt;
</code></pre>

<h3 id="methods-forEachCell"><a href="#methods-forEachCell">forEachCell</a></h3>

<p>Executes a function for each cell in the range.</p>

<h4>Parameters</h4>

<h5>callback <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h5>

<p>The function that will be executed against every cell. The function receives the following parameters:</p>

<ul>
<li>
<strong>rowIndex</strong> - the row index of the cell</li>
<li>
<strong>columnIndex</strong> - the column index of the cell</li>
<li>
<strong>value</strong> - the cell properties</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script&gt;

    $("#spreadsheet").kendoSpreadsheet({
        sheets: [
            { rows: [
                { cells: [
                    { value: "A1" }, { value: "B1" }
                ] },
                { cells: [
                    { value: "A2" }, { value: "B2" }
                ] }
            ] }
        ]
    });


    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    var range = sheet.range("A1:B2");

    range.forEachCell(function (row, column, value) {
        console.log(row, column, value);
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-format"><a href="#methods-format">format</a></h3>

<p>Gets or sets the format of the cells.</p>

<h4>Parameters</h4>

<h5>format <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>The new format for the cells.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the format of the top-left cell of the range.  When used as a
setter, <code>format</code> returns the Range object to allow chained calls.</p>

<p>More details about the supported format may be found in <a href="/web/spreadsheet/format">the cell formatting help topic</a>.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").value(12.3456).format("#.###");
&lt;/script&gt;
</code></pre>

<h3 id="methods-formula"><a href="#methods-formula">formula</a></h3>

<p>Gets or sets the formula of the cells.</p>

<h4>Parameters</h4>

<h5>formula <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>The new formula of the cell. The string may optionally start with <code>=</code>.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the formula of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").input("1000");
    sheet.range("A2").formula("A1*2");
    console.log(sheet.range("A2").formula()); // "A1*2"
&lt;/script&gt;
</code></pre>

<h3 id="methods-hasFilter"><a href="#methods-hasFilter">hasFilter</a></h3>

<p>Returns <code>true</code> if the sheet of the range has filter enabled.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <code>true</code> if the sheet has a filter, <code>false</code> otherwise.</p>

<h4>Example - clear the filters for a column</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;

&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ "C 1", "C 2", "C 3" ],
        [ 7, 5, 6 ],
        [ 7, 8, 9 ],
        [ 6, 3, 9 ]
    ];

    sheet.range("A1:C4").values(values);

    var filter = new kendo.spreadsheet.ValueFilter({ values: [ 7 ] });
    var filter2 = new kendo.spreadsheet.ValueFilter({ values: [ 8 ] });

    sheet.range("A1:C4").filter([
      { column: 0, filter: filter },
        { column: 1, filter: filter2 }
    ]);

    console.log(sheet.range("A1:C4").hasFilter());
&lt;/script&gt;
</code></pre>

<h3 id="methods-input"><a href="#methods-input">input</a></h3>

<p>Gets or sets the value of the cells.  This is similar to <code>value</code>, but it parses the argument as if it was entered through the text box:</p>

<ul>
<li>if it starts with <code>=</code> (equal sign), a <em>formula</em> is set.  This may throw an error if the formula is syntactically invalid.  Example: <code>range("C1").input("=A1+B1")</code>.</li>
<li>if it looks like a number, a numeric value (not string) is set.</li>
<li>if it's <code>true</code> or <code>false</code> (case-insensitive) the respective boolean value is set.</li>
<li>if it's a <code>Date</code> object, or a string that can be parsed as a date, it is converted to the numerical representation of the date.</li>
<li>if it starts with <code>'</code> (single quote), a string containing the rest of the characters is set.  Example: <code>range("A1").input("'TRUE")</code> — sets the <em>text</em> "TRUE", not the boolean.</li>
</ul>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> <em>optional</em>
</h5>

<p>The value to be set to the cells.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").input("1");
    sheet.range("A2").input("=A1*2");
&lt;/script&gt;
</code></pre>

<h3 id="methods-isSortable"><a href="#methods-isSortable">isSortable</a></h3>

<p>Returns if a range can be sorted.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> whether the range can be sorted.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var range = sheet.range("A1:B1");

    if (range.isSortable()) {
        range.sort()
    }
&lt;/script&gt;
</code></pre>

<h3 id="methods-isFilterable"><a href="#methods-isFilterable">isFilterable</a></h3>

<p>Returns if a range can be filtered.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> whether the range can be filtered.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var range = sheet.range("A1:B1");

    if (range.isFilterable()) {
        range.filter(true);
    }
&lt;/script&gt;
</code></pre>

<h3 id="methods-italic"><a href="#methods-italic">italic</a></h3>

<p>Gets or sets the italic state of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>optional</em>
</h5>

<p>True will make the text of the cells italic; false otherwise.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> the current italic state of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("italic");
    sheet.range("A1").italic(true);
&lt;/script&gt;
</code></pre>

<h3 id="methods-link"><a href="#methods-link">link</a></h3>

<p>Gets or sets the hyperlink of the cells in the range.</p>

<h4>Parameters</h4>

<h5>url <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>Pass a string (the URL) to create a hyperlink.  Pass <code>null</code> to remove the link.
Omit argument to get the existing URL, if any.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the current hyperlink attribute of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("Visit telerik.com!");
    sheet.range("A1").link("http://www.telerik.com/");
&lt;/script&gt;
</code></pre>

<h3 id="methods-merge"><a href="#methods-merge">merge</a></h3>

<p>Merges the range cells into a single merged cell. If the range already includes a merged cell, they are merged, too.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1:B2").merge();
&lt;/script&gt;
</code></pre>

<h3 id="methods-select"><a href="#methods-select">select</a></h3>

<p>Sets the sheet selection to the range cells.</p>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1:B2").select();
&lt;/script&gt;
</code></pre>

<h3 id="methods-sort"><a href="#methods-sort">sort</a></h3>

<p>Sorts the rows in the range.</p>

<h4>Parameters</h4>

<h5>sort <code>Number  |</code><code> Object  |</code><code> Array</code>
</h5>

<p>Determines the action performed by the method.</p>

<ul>
<li>Passing a number <code>n</code> sorts the <code>n</code>th column in the range, in ascending order.</li>
<li>Passing a <code>{ column: Number, ascending: Boolean }</code> sorts the respective column in ascending / descending order, based on the ascending parameter. The column index is relative to the beginning of the range.</li>
<li>Passing an array of <code>{ column: Number, ascending: Boolean }</code> objects sorts each column, specified by the index.</li>
</ul>

<h4>Example - sort a single column</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 7, 8, 9 ],
        [ 4, 5, 6 ]
    ];

    sheet.range("A1:C3").values(values);

    sheet.range("A1:C3").sort(1);
&lt;/script&gt;
</code></pre>

<h4>Example - sort a column in descending order</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 7, 8, 9 ],
        [ 4, 5, 6 ]
    ];

    sheet.range("A1:C3").values(values);

    sheet.range("A1:C3").sort({ column: 2, ascending: false });
&lt;/script&gt;
</code></pre>

<h3 id="methods-textAlign"><a href="#methods-textAlign">textAlign</a></h3>

<p>Gets or sets the text alignment of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>One of the following values: "left", "center", "right" and "justify".</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the current text alignment of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.range("A1").value("left");
    sheet.range("A1").textAlign("left");
    sheet.range("A2").value("right");
    sheet.range("A2").textAlign("right");
    sheet.range("A3").value("center");
    sheet.range("A3").textAlign("center");
    sheet.range("A4").value("justify");
    sheet.range("A4").textAlign("justify");
&lt;/script&gt;
</code></pre>

<h3 id="methods-unmerge"><a href="#methods-unmerge">unmerge</a></h3>

<p>Un-merges any merged cells which are included in the range.</p>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1:B2").merge();
    sheet.range("B3:C3").merge();
    sheet.range("A1:D4").unmerge(); // this will unmerge both merged cells.
&lt;/script&gt;
</code></pre>

<h3 id="methods-values"><a href="#methods-values">values</a></h3>

<p>Gets or sets the values of the range cells. The argument should be an array of arrays which match the dimensions of the range.</p>

<blockquote>
<p>This method clears the formulas on every cell.</p>
</blockquote>

<h4>Parameters</h4>

<h5>values <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>The cell values.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> the cell values.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    var values = [
        [ 1, 2, 3 ],
        [ 4, 5, 6 ],
        [ 7, 8, 9 ]
    ];

    sheet.range("A1:C3").values(values);
&lt;/script&gt;
</code></pre>

<h3 id="methods-validation"><a href="#methods-validation">validation</a></h3>

<p>Gets or sets the validation of the cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>The validation configuration object. It may contain <code>type</code>, <code>comparerType</code>, <code>dataType</code>, <code>from</code>, <code>to</code>, <code>allowNulls</code>, <code>messageTemplate</code> and <code>titleTemplate</code> keys.</p>

<blockquote>
<p>Setting a validation, which contains references to a range of two or more cells, leads to the adjustment of the validation formula if a relative reference is used. In such cases, use an absolute reference such as <code>$A$1</code>.</p>
</blockquote>

<p>The <code>type</code> Can be set to "warning" or "reject". By default the type is "warning".</p>

<p>The <code>comparerType</code> Can be set to "greaterThan", "lessThan", "between", "equalTo", "notEqualTo", "greaterThanOrEqualTo", "lessThanOrEqualTo", "notBetween" or "custom".</p>

<p>The <code>dataType</code> Can be set to "date", "text", "number", "list" or "custom".</p>

<p>The <code>from</code> This key holds formula or value. Used as first or only compare value depending on specified comparer.</p>

<p>The <code>to</code> This key can be set to formula or value. It's optional depending on the specified comparer.</p>

<p>The <code>allowNulls</code> Can be set to boolean value.</p>

<p>The <code>messageTemplate</code> The message which will be displayed in the "reject" validation window.</p>

<p>The <code>titleTemplate</code> The title of the "reject" validation window.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current validation of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1").value(4);
    sheet.range("A1").validation({
        from: "1",
        to: "2",
        comparerType: "between",
        dataType: "number",
        messageTemplate: "Number should match the validation."
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-value"><a href="#methods-value">value</a></h3>

<p>Gets or sets the value of the cells.</p>

<blockquote>
<p>If the cell has formula set, the value setting will clear it.</p>
</blockquote>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> <em>optional</em>
</h5>

<p>The value to be set to the cells.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current value of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A1:B2").value("foo");
&lt;/script&gt;
</code></pre>

<h3 id="methods-verticalAlign"><a href="#methods-verticalAlign">verticalAlign</a></h3>

<p>Gets or sets the vertical alignment of the cells in the range.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>optional</em>
</h5>

<p>One of the following values: "top", "center" and "bottom".</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the current text alignment of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;
    $("#spreadsheet").kendoSpreadsheet();
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
    var sheet = spreadsheet.activeSheet();
    sheet.rowHeight(0, 40);
    sheet.rowHeight(1, 40);
    sheet.rowHeight(2, 40);
    sheet.range("A1").value("top");
    sheet.range("A1").verticalAlign("top");
    sheet.range("A2").value("center");
    sheet.range("A2").verticalAlign("center");
    sheet.range("A3").value("bottom");
    sheet.range("A3").verticalAlign("bottom");
&lt;/script&gt;
</code></pre>

<h3 id="methods-wrap"><a href="#methods-wrap">wrap</a></h3>

<p>Gets or sets the wrap of the range cells.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>optional</em>
</h5>

<p><code>true</code> if to enable wrapping, <code>false</code> otherwise.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> the current wrap state of the top-left cell of the range.</p>

<h4>Example</h4>

<pre><code>&lt;div id="spreadsheet"&gt;&lt;/div&gt;
&lt;script type="text/javascript" charset="utf-8"&gt;

    $("#spreadsheet").kendoSpreadsheet();

    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var sheet = spreadsheet.activeSheet();

    sheet.range("A2").value("long long long long long long text");
    sheet.range("A2:B3").wrap(true);
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

